<template>
  <div class="wrapper">
    <h4>今日上榜</h4>
    <div class="grid">
      <div>
        <h4>实时数据</h4>
        <span>焦点</span>
      </div>
      <div>
        <h4>实时数据</h4>
        <span>焦点</span>
      </div>
      <div>
        <h4>实时数据</h4>
        <span>焦点</span>
      </div>
      <div>
        <h4>实时数据</h4>
        <span>焦点</span>
      </div>
      <div>
        <h4>实时数据</h4>
        <span>焦点</span>
      </div>
      <div>
        <h4>实时数据</h4>
        <span>焦点</span>
      </div>
      <div>
        <h4>实时数据</h4>
        <span>焦点</span>
      </div>
    </div>
    <div class="nav">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  width: 400px;
  border: 1px #dadadc solid;
  padding: 10px;
  box-sizing: border-box;
}

.grid {
  display: grid;
  height: 352px;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "a1 a2 a2"
    "a3 a2 a2"
    "a4 a4 a5"
    "a6 a7 a7";
  gap: 5px;
}

.grid div:nth-of-type(1) {
  grid-area: a1;
  background-image: linear-gradient(#187fe6, #32aff2);
}

.grid div:nth-of-type(2) {
  background-image: linear-gradient(#f2246c, #fe5bac);
  grid-area: a2;
}

.grid div:nth-of-type(3) {
  background-image: linear-gradient(#d46300, #e5ad1c);
  grid-area: a3;
}

.grid div:nth-of-type(4) {
  background-image: linear-gradient(#d46300, #e5ad1c);
  grid-area: a4;
}

.grid div:nth-of-type(5) {
  background-image: linear-gradient(#f2246c, #fe5bac);
  grid-area: a5;
}

.grid div:nth-of-type(6) {
  background-image: linear-gradient(#187fe6, #32aff2);
  grid-area: a6;
}

.grid div:nth-of-type(7) {
  background-image: linear-gradient(#d46300, #e5ad1c);
  grid-area: a7;
}

.nav {
  display: flex;
  justify-content: flex-end;

  span {
    border: 1px #dadadc solid;
    padding: 2px;
    margin-left: 5px;
    margin-top: 5px;
    cursor: pointer;
  }
}
</style>
